<template>
	<!--使用uview的calendar-->
	<view :class="$isPc ? 'pc-calendar' : ''">
		<u-calendar
			:show="options.isShow"
			:title="options.title"
			:showTitle="options.showTitle"
			:mode="options.mode"
			:startText="options.startText"
			:endText="options.endText"
			:customList="options.customList"
			:color="options.color"
			:minDate="options.minDate"
			:maxDate="options.maxDate"
			:defaultDate="options.defaultDate"
			:maxCount="options.maxCount"
			:rowHeight="options.rowHeight"
			:formatter="options.formatter"
			:showLunar="options.showLunar"
			:showMark="options.showMark"
			:confirmText="options.confirmText"
			:confirmDisabledText="options.confirmDisabledText"
			:closeOnClickOverlay="options.closeOnClickOverlay"
			:readonly="options.readonly"
			:maxRange="options.maxRange"
			:rangePrompt="options.rangePrompt"
			:showRangePrompt="options.showRangePrompt"
			:allowSameDay="options.allowSameDay"
			:round="options.round"
			:monthNum="options.monthNum"
			@confirm="_confirm"
			@close="_close">
		</u-calendar>
	</view>
</template>

<script>
	export default {
		name:"c-base-calendar-uview",
		data() {
			return {
				options: {},
				defaultOptions: {
					paramName: "",
					isShow: false,
					title: "日期选择",
					showTitle: true,
					mode: "single",
					startText: "开始",
					endText: "结束",
					customList: [],
					color: "#3c9cff",
					minDate: 0,
					maxDate: 0,
					defaultDate: null,
					maxCount: Number.MAX_SAFE_INTEGER,
					rowHeight: 56,
					formatter: null,
					showLunar: false,
					showMark: true,
					confirmText: "确定",
					confirmDisabledText: "确定",
					closeOnClickOverlay: false,
					readonly: false,
					maxRange: Number.MAX_SAFE_INTEGER,
					rangePrompt: "",
					showRangePrompt: true,
					allowSameDay: false,
					round: 0,
					monthNum: 3
				}
			}
		},
		methods: {
			open(options) {
				this.options = JSON.parse(JSON.stringify(this.defaultOptions))
				if (options) {
					for (let i in this.options) {
						this.options[i] = options[i] || this.options[i]
						if (i == "showTitle" || i == "showMark" || i == "showRangePrompt") {
							this.options[i] = options[i] !== false ? true : false
						}
						if (i == "showLunar" || i == "closeOnClickOverlay" || i == "readonly" || i == "allowSameDay") {
							this.options[i] = options[i] || false
						}
					}
				}
				this.options.isShow = true
				this._hideKeyboard()
			},
			_confirm(item) {
				item.paramName = this.options.paramName
				this.$emit("selected", item)
				this._close()
			},
			_close() {
				this.options.isShow = false
			},
			_hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>

<style lang="scss">
	.pc-calendar {
		/deep/ .u-transition {
			padding-left: calc(50% - 200px);
			padding-bottom: calc(50vh - 250px);
			.u-popup__content {
				width: 400px;
				height: 500px;
			}
		}
	}
</style>
